import React from "react";
import { Swiper } from "antd-mobile";
import "../assets/css/mine.css";

import { getBanner } from "../request/api";

class Mine extends React.Component {
  constructor() {
    super();
    this.state = {
      nickname:'',
      bannerlist: [],
    };
  }
  componentDidMount() {
    // console.log(JSON.parse(sessionStorage.getItem('isLogin')));
    let user = JSON.parse(sessionStorage.getItem('isLogin'));
    console.log(user);
    getBanner().then((res) => {
      console.log(res);
      if (res.code == 200) {
        this.setState(
          {
            nickname:user.nickname,
            bannerlist: res.list,
          },
          () => {
            console.log(this.state.bannerlist);
          }
        );
      }
    });
  }
  render() {
    const { bannerlist } = this.state;
    return (
      <div id="my">
        <header>
          {/* 顶部信息 */}
          <div className="top_box">
            <h2>我的</h2>
          </div>
          <div className="bot_box">
            <div className="top">
              <div className="left">
                <img src={require("../assets/images/useravatar.png")} alt="" />
                <p>
                  <span>{this.state.nickname}</span>
                  <span>完善资料让小U更懂您</span>
                </p>
              </div>
              <div className="right">
                <img src={require("../assets/images/红包.png")} alt="" />
                <a href="#">每日签到</a>
              </div>
            </div>
            <div className="bot">
              <p>
                <a href="#">
                  <span>12</span>
                </a>
                <span>我的收藏</span>
              </p>
              <p>
                <a href="#">
                  <span>12</span>
                </a>
                <span>浏览记录</span>
              </p>
              <p>
                <a href="#">
                  <span>￥</span>
                  <span>0</span>
                </a>
                <span>我的红包</span>
              </p>
              <p>
                <a href="#">
                  <span>12</span>
                </a>
                <span>优惠券</span>
              </p>
            </div>
            <div className="wrap">
              <div className="wrap_top">
                <p>我的订单</p>
                <a href="#">
                  <p>全部订单</p>
                  <span className="iconfont icon-arrow-right"></span>
                </a>
              </div>
              <div className="wrap_bot">
                <a href="#">
                  <img src={require("../assets/images/待付款.png")} alt="" />
                  <span>待付款</span>
                </a>
                <a href="#">
                  <img src={require("../assets/images/待收货.png")} alt="" />
                  <span>待收货</span>
                </a>
                <a href="#">
                  <img src={require("../assets/images/评价.png")} alt="" />
                  <span>评价</span>
                </a>
                <a href="#">
                  <img src={require("../assets/images/售后.png")} alt="" />
                  <span>售后/退款</span>
                </a>
              </div>
            </div>
          </div>
        </header>
        {/* 轮播图 */}
        <Swiper autoplay loop>
          {bannerlist.map((item) => (
            <Swiper.Item key={item.id} className="center">
              <img src={item.img} alt="" />
            </Swiper.Item>

          ))}
        </Swiper>

        <div className="icon">
          <p>
            <span>
              <img src={require("../assets/images/地址管理.png")} alt="" />
            </span>
            <span>地址管理</span>
          </p>
          <p>
            <span>
              <img src={require("../assets/images/我的钱包.png")} alt="" />
            </span>
            <span>我的钱包</span>
          </p>
          <p>
            <span>
              <img src={require("../assets/images/我的二维码.png")} alt="" />
            </span>
            <span>我的二维码</span>
          </p>
          <p>
            <span>
              <img src={require("../assets/images/我的小伙伴.png")} alt="" />
            </span>
            <span>我的小伙伴</span>
          </p>
          <p>
            <span>
              <img src={require("../assets/images/0元试用.png")} alt="" />
            </span>
            <span>0元试用</span>
          </p>
        </div>
        <div className="kong"></div>
      </div>
    );
  }
}
export default Mine;
